<template>
  <h1 ref="dom">Hello Vue3</h1>
  <ul>
    <li v-for="item in 4" :key="item" :ref="getDoms">第{{ item }}个li</li>
  </ul>
</template>

<script>
import { onMounted, ref } from 'vue'
/* 
  目标：掌握使用ref属性绑定DOM或组件

    Vue3 获取通过 ref 属性获取 DOM 节点写法比较麻烦，其实获取DOM用 document.querySelector 更方便 
    但是 ref 还是要学习，因为它除了获取DOM节点，还可以用来获取组件。

    ref 属性应用场景：
      场景1：获取DOM (比较少用)
      场景2：获取组件
*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')
    // this.$refs.dom
    const dom = ref(null)

    // 获取多个节点需要写成函数，形参就是每个 dom 节点
    const doms = []
    const getDoms = el => {
      // console.log(el)
      doms.push(el)
    }

    // 组件挂载完毕后，可以获取到DOM节点
    onMounted(() => {
      console.log(dom.value) // <h1></h1>
      console.log(doms) // [li, li, li, li]
    })

    return { dom, getDoms }
  },
}
</script>

<style></style>
